<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html>
	<head>
		<title>jScrollPane</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" media="all" href="styles/demoStyles.css" />
	</head>
	<body>
		<div id="new-version">
			<h1>Update available</h1>
			<p>
				Please note that you are looking at the website for version 1 of the jScrollPane plugin. This version
				of the plugin is now deprecated - you can find the latest version on the <a href="http://jscrollpane.kelvinluck.com">
				new jScrollPane website</a>.
			</p>
		</div>
		<h1>jScrollPane</h1>
		<p id="intro">
			jScrollPane is a <a href="http://www.jquery.com/">jquery</a> plugin which allows you to replace the 
			browsers default vertical scrollbars on	any block level element with an <em>overflow:auto</em> style. 
			You can easily control the apperance of	the custom scrollbars using simple CSS.
		</p>
		<p>
			jScrollPane is crossbrowser, working on all browsers that support jquery and it also  
			degrades gracefully. If a user's browser doesn't support jQuery or has JavaScript turned off then 
			they will see the browsers default scrollbars. If the 
			<a href="http://jquery.com/plugins/project/mousewheel">mouse wheel plugin</a> is 
			included in the page then the scroll panes will respond to mouse wheel events as well.
		</p>
		<p>
			jScrollPane is built on top of the <a href="http://www.jquery.com/">awesome jQuery library</a> and
			optionally utilises the <a href="http://jquery.com/plugins/project/mousewheel">mouse wheel plugin</a>
			and the <a href="http://davecardwell.co.uk/javascript/jquery/plugins/jquery-em/">jQEm plugin</a>
		</p>
		<h2>Examples</h2>
		<p>
			There are a number of different examples of different ways you can use jScrollPane:
		</p>
		<ul>
			<li><a href="basic.html">Basic scrollbars</a></li>
			<li><a href="examples.html">OS style scrollbars</a></li>
			<li><a href="scrollTo.html">scrollTo functionality</a></li>
			<li><a href="ajax_example.html">example of loading content into scroll pane using AJAX</a></li>
			<li><a href="fullBodyScroll.html">fullpage scroll and nested scrollpanes</a></li>
			<li><a href="scrollToSpeed.html">scrollTo functionality with different speeds</a></li>
			<li><a href="imagesExample.html">using jScrollPane with the reinitialiseOnImageLoad parameter so that it automagically updates when any images inside it load</a></li>
			<li><a href="tabFormFieldExample.html">an example showing tabbing amoungst form fields inside the jscrollpane</a></li>
			<li><a href="jumpToExternalAnchorExample.html#marker">example showing scrolling to a specific place in a jScrollPane from an external link</a></li>
			<li><a href="textSizeChange.html">using jScrollPane with jQEm so it works even when the user changes their text size in the browser</a></li>
			<li><a href="tabs_example.html">with jQuery UI tabs plugin</a></li>
			<li><a href="defaultOptions.html">setting the default options for all jScollPanes on a page</a></li>
			<li><a href="chat.html">an example showing how you can force a jScrollPane to always scroll to the bottom (e.g. for a chat scenario)</a></li>
			<li><a href="cap_examples.html">examples showing how you can use caps to make the scrollbar track shorter than the actual pane</a></li>
			<li><a href="remove.html">an example showing how you can undo the jScrollPane-ing of an element and revert it to it's original state</a></li>
			<li><a href="basic_print.html">an example showing how you can create a print specific stylesheet which will show the contents of your jScollPane</a></li>
			<li><a href="onImagesLoadExample.html">[deprecated] using jScrollPane with jquery.onImagesLoad so it works even when your scroll pane contains images which haven't been loaded when you initialise it</a></li>
		</ul>
		<h2>Real world examples</h2>
		<p>
			Here are some examples of jScrollPane being used in the real world - they demonstrate how
			varied the scroll bars you can create can be.
		</p>
		<ul>
			<li>In the Tignes Spirit <a href="http://www.tignes-spirit.com/store/details/29">snowboard store</a.></li>
			<li>In the <a href="http://www.lisakline.com/">Lisa Kline</a> online boutique.</li>
			<li>On <a href="http://www.lab-au.com/index.php?section=news">lab-au's</a> news panel.</li>
			<li>On <a href="http://www.rezo.ge/design.htm">Rezo Kaishauri's portfolio</a> site.</li>
		</ul>
		<h2>Usage</h2>
		<p>Just include the following files in the head of your page:</p>
		<ul>
			<li><a href="scripts/jquery-1.2.6.min.js">jQuery</a> (I'm using 1.2.6 here)</li>
			<li><a href="scripts/jquery.mousewheel.js">the mouse wheel plugin</a> (if you want mouse wheel support)</li>
			<li><a href="scripts/jquery.em.js">the jQEm plugin</a> (if you want your scroll panes to automagically resize when the user changes text size)</li>
			<li><a href="scripts/jScrollPane.js">jScrollPane.js</a></li>
			<li><a href="styles/jScrollPane.css">jScrollPane.css</a></li>
		</ul>
		<p>Like so:</p>
<pre>
&lt;script type="text/javascript" src="scripts/jquery-1.2.6.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="scripts/jquery.mousewheel.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="scripts/jquery.em.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="scripts/jScrollPane.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPane.css" /&gt;
</pre>
		<p>
			Then you can use any query selector to select the elements you would like to apply jScrollPane
			and then initialise it. The following code runs when the document is ready and finds any element
			with a class of "scroll-pane" and then calls jScrollPane on them.
		</p>
<pre>
$(function()
{
	$('.scroll-pane').jScrollPane();
});
</pre>
		<p>
			You can pass some optional parameters to the jScrollPane function. These take the form of an object
			with the following attributes:
		</p>
		<ul>
			<li><strong>scrollbarWidth</strong> [int] - the width of the created scrollbar in pixels (defaults to 10)</li>
			<li><strong>scrollbarMargin</strong> [int] - the margin to leave to the left of the scrollbar in pixels (defaults to 5)</li>
			<li><strong>wheelSpeed</strong> [int] - controls how fast the mouse wheel makes the content scroll in pixels (defaults to 18)</li>
			<li><strong>showArrows</strong> [boolean] - controls whether to display arrows for the user to scroll with (defaults to false)</li>
			<li><strong>arrowSize</strong> [int] - the height of the arrow buttons if showArrows=true (calculated from CSS if not provided)</li>
			<li><strong>animateTo</strong> [boolean] - whether to animate when calling <a href="scrollTo.html">scrollTo and scrollBy</a> (defaults to false)</li>
			<li><strong>dragMinHeight</strong> [int] - the minimum height to allow the drag bar to be (defaults to 0)</li>
			<li><strong>dragMaxHeight</strong> [int] - the maximum height to allow the drag bar to be (defaults to 99999!)</li>
			<li><strong>animateInterval</strong> [int] - The interval in milliseconds to update an animating scrollPane (default 100)</li>
			<li><strong>animateStep</strong> [int] - The amount to divide the remaining scroll distance by when animating (default 3)</li>
			<li><strong>maintainPosition</strong> [boolean] - Whether you want the contents of the scroll pane to maintain it's position when you re-initialise it - so it doesn't scroll as you add more content (default true)</li>
			<li><strong>scrollbarOnLeft</strong> [boolean] - Whether the scrollbar should appear on the left hand side of the panes content (make sure your CSS also reflects this)</li>
			<li><strong>reinitialiseOnImageLoad</strong> [boolean] - Whether the jScrollPane should automatically re-initialise itself when any contained images are loaded (defaults to false)</li>
		</ul>
		<h2>Downloads</h2>
		<p>
			You can download this plugin in a number of ways. Release version distributions are available from the <a href="http://code.google.com/p/jscrollpane/downloads/list">jScrollPane
			googlecode site</a>. Or the latest sourcecode is always available in the <a href="http://code.google.com/p/jscrollpane/source/checkout">googlecode subversion repository</a>.
		</p>
		<h2>Donate</h2>
		<p>
			jScrollPane is completely free and open source. However, if you find jScrollPane useful and you would like to make a donation towards my beer fund then please use the paypal button below to donate any amount. Thanks!
		</p>
		<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input type="hidden" name="cmd" value="_donations"/><input type="hidden" name="business" value="V2UG6D75CZ4SS"/><input type="hidden" name="lc" value="GB"/><input type="hidden" name="item_name" value="jScrollPane"/><input type="hidden" name="currency_code" value="GBP"/><input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_SM.gif:NonHosted"/><input type="image" src="https://www.paypal.com/en_GB/i/btn/btn_donate_SM.gif" style="border:0;" name="submit" alt=""/><img alt="" border="0" style="padding:0;" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1"/></form>

		<h2>Limitations</h2>
		<p>
			Because the element that you turn into a scrollpane is wrapped in another element you can't apply any
			positional styling to it. This is a shame but the problem is easily avoided by wrapping the element in
			another div with the positional styling on it (like the divs on this page with a class of holder).
		</p>
		<h2>Bugs</h2>
		<p>Bug reports and enhancement requests should be made through the <a href="http://code.google.com/p/jscrollpane/issues/list">jScrollPane issues page</a> on googlecode. All bug reports should include full details of the browser/ OS that the bug appears on and a link to a test URL displaying the bug. This is the only avenue that I can accept bug reports through as otherwise it is too hard to keep track of them.</p>
		<h2 id="faqs">FAQs</h2>
		<h3>jScrollPane doesn't work in Internet Explorer on my site</h3>
		<p>There are two common reasons for jScrollPane failing in IE:</p>
		<ul>
			<li>You have a trailing comma in your settings initialiser. Trailing commas in array or object literals break in IE.</li>
			<li>You are manually adding the jScrollPaneContainer in your markup. This container is added by jScrollPane - you should not add it yourself. View source of the examples (e.g. not the GENERATED source in firebug) to get the correct syntax.</li>
		</ul>
		<h2>Support</h2>
		<p>Support for jScrollPane is available through the <a href="http://groups.google.com/group/jscrollpane/">jScrollPane google group</a>. But please make sure you first check the FAQs above. I will do what I can to help although some questions might get a faster response from the friendly folks on the <a href="http://groups.google.com/group/jquery-en">jQuery mailing list</a>. If your problem is urgent and you want prioritised help then there is donate button above which you can use to try and catch my attention ;)</p>
	</body>
</html>